
<template>
  <view class="register-container">
    <view class="header">
      <text class="title">乘客注册中心</text>
    </view>
    
    <form @submit.prevent="handleSubmit">
      <view class="form-item">
        <text class="label">姓名：</text>
        <input
          class="input"
          v-model="form.passengerName"
          type="text"
          placeholder="请输入姓名"
        />
      </view>

      <view class="form-item">
        <text class="label">手机号：</text>
        <input
          class="input"
          v-model="form.passengerPhone"
          type="number"
          placeholder="请输入11位手机号"
          :disabled="true"
        />
      </view>

      <view class="form-item">
        <text class="label">性别：</text>
        <picker 
          class="picker"
          mode="selector" 
          :range="genders" 
          range-key="label"
          @change="onGenderChange"
        >
          <view class="picker-text">
  {{ genders.find(g => g.value === form.passengerGender)?.label || '请选择性别' }}
</view>

        </picker>
      </view>

      <view v-if="errorMessage" class="error-message">{{ errorMessage }}</view>

      <button class="submit-btn" @click="register">注册</button>
    </form>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { ApiPostRegisterPassenger } from '../api/user';
import { useStore } from 'vuex';

const $store = useStore();
const form = ref({
  passengerName: '',
  passengerPhone: '',
  passengerGender: ''
});

const genders = ref([
  { label: '男', value: 1 },
  { label: '女', value: 2 }
]);

const errorMessage = ref('');

onLoad((query) => {
  if (query.phone) {
    form.value.passengerPhone = decodeURIComponent(query.phone);
  }
});

const onGenderChange = (e) => {
  const selectedIndex = e.detail.value;
  if (selectedIndex >= 0 && selectedIndex < genders.value.length) {
    form.value.passengerGender = genders.value[selectedIndex].value;
  }
};

const register = async () => {
  if (!form.value.passengerName.trim()) {
    uni.showToast({
      title: '请填写姓名',
      icon: 'none'
    });
    return;
  }

  if (!form.value.passengerGender) {
    uni.showToast({
      title: '请选择性别',
      icon: 'none'
    });
    return;
  }

  const { error, result } = await ApiPostRegisterPassenger({
    passengerName: form.value.passengerName,
    passengerGender: form.value.passengerGender,
    passengerPhone: form.value.passengerPhone
  });

  if (error) {
    uni.showToast({
      title: error.message || '注册失败',
      icon: 'none'
    });
    return;
  }

  $store.commit('setToken', result.accessToken);
  uni.redirectTo({ url: '/pages/index/index' });
};

const handleSubmit = () => {
  errorMessage.value = '';
console.log(form.value.passengerGender);

  if (!form.value.passengerName.trim()) {
    errorMessage.value = '姓名不能为空';
    return;
  }

  const phoneRegex = /^1\d{10}$/;
  if (!phoneRegex.test(form.value.passengerPhone)) {
    errorMessage.value = '手机号格式不正确';
    return;
  }

  if (!form.value.passengerGender) {
    errorMessage.value = '请选择性别';
    return;
  }

  register();
};
</script>

<style scoped>
.register-container {
  padding: 40rpx;
}

.header {
  margin-bottom: 60rpx;
  text-align: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.form-item {
  margin-bottom: 40rpx;
}

.label {
  display: block;
  margin-bottom: 16rpx;
  font-size: 28rpx;
  color: #333;
}

.input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.picker {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
}

.picker-text {
  font-size: 28rpx;
  color: #333;
}

.submit-btn {
  margin-top: 60rpx;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 8rpx;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 32rpx;
}

.error-message {
  color: #ff4d4f;
  font-size: 24rpx;
  margin-top: 10rpx;
}
</style>